<script setup>
	import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
	import { ref } from 'vue'
	import {
		addMaterialService,
		getMaterialListService,
		deleteMaterialService,
		updateMaterialService,
	} from '@/api/material'

	const drawer = ref(false)
	const title = ref('添加新材料')
	const btnSave = ref('确认添加')
	const tableData = ref([])

	const materialList = async () => {
		const result = await getMaterialListService()
		tableData.value = result.data
	}
	materialList()

	const form = ref({
		materialName: '',
		materialPrice: '',
	})
	const clearForm = () => {
		form.value.materialName = ''
		form.value.materialPrice = ''
		drawer.value = false
	}
	const handleEdit = (index, row) => {
		ElMessageBox.confirm(`确认删除材料：${row.materialName}?`)
			.then(async () => {
				await deleteMaterialService(row.id)
				ElNotification({
					title: '删除成功',
					message: `成功删除材料：${row.materialName}`,
					type: 'success',
				})
				materialList()
			})
			.catch(() => {
				ElMessage.info('取消删除')
			})
	}
	const addMaterial = () => {
		title.value = '添加新材料'
		btnSave.value = '确认添加'
		clearForm()
		drawer.value = true
	}
	const currentId = ref('')
	const updateMaterial = (row) => {
		title.value = '更新材料'
		btnSave.value = '确认更新'
		drawer.value = true
		form.value.materialName = row.materialName
		form.value.materialPrice = row.materialPrice
		currentId.value = row.id
	}

	const confirmAdd = () => {
		if (btnSave.value == '确认添加') {
			ElMessageBox.confirm(`确定添加新材料：${form.value.materialName}？`)
				.then(async () => {
					await addMaterialService(form.value)
					ElNotification({
						title: '添加成功',
						message: `成功添加材料：${form.value.materialName}`,
						type: 'success',
					})
					clearForm()
					materialList()
				})
				.catch(() => {
					// catch error
				})
		} else {
			ElMessageBox.confirm(`确定更新材料：${form.value.materialName}？`)
				.then(async () => {
					await updateMaterialService(currentId.value, form.value)
					ElNotification({
						title: '更新成功',
						message: `成功更新材料：${form.value.materialName}`,
						type: 'success',
					})
					clearForm()
					materialList()
				})
				.catch(() => {
					// catch error
				})
		}
	}
</script>

<template>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column label="更新日期" width="300" prop="updateTime">
		</el-table-column>
		<el-table-column label="单价/元" width="120" prop="materialPrice">
		</el-table-column>
		<el-table-column label="材料名称" width="120">
			<template #default="scope">
				<el-popover
					effect="light"
					trigger="hover"
					placement="top"
					width="auto">
					<template #default>
						<div>创建时间: {{ scope.row.createTime }}</div>
					</template>
					<template #reference>
						<el-tag>{{ scope.row.materialName }}</el-tag>
					</template>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button
					size="small"
					type="info"
					@click="updateMaterial(scope.row)">
					更新
				</el-button>
				<el-button
					size="small"
					type="danger"
					@click="handleEdit(scope.$index, scope.row)">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-button type="primary" :icon="Search" @click="addMaterial">
		添加新材料
	</el-button>
	<el-drawer v-model="drawer" direction="ttb" size="50%">
		<template #header>
			<h4>{{ title }}</h4>
		</template>
		<template #default>
			<el-form :model="form" label-width="auto" style="max-width: 600px">
				<el-form-item label="材料名称">
					<el-input v-model="form.materialName" />
				</el-form-item>
				<el-form-item label="单价">
					<el-input v-model="form.materialPrice" />
				</el-form-item>
			</el-form>
		</template>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="drawer = false">取消</el-button>
				<el-button type="primary" @click="confirmAdd">
					{{ btnSave }}
				</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<style scoped></style>
